<template>
  <el-form ref="formAmountItem" :model="form" :rules="rules" label-width="65px">
    <el-form-item label="名称" style="width:50%;" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item v-if="form.timeType !== 'default'" label="时间" prop="timeList">
      <el-checkbox-group v-model="form.timeList">
        <el-checkbox @change="timeChange(item,$event)" v-for="item in showWeeks" :disabled="item.disabled" :key="item.id" :label="item.name"></el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="价格" style="width:50%;" prop="amount">
      <el-input type="number" v-model="form.amount"></el-input>
    </el-form-item>
  </el-form>
</template>
<script>
import http from '@/services/xhr';
import apiSetting from '@/services/api';

export default {
  props: {
    formPrice: {
      type: Object,
      required: true
    },
    priceList: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      form: {
        name: '',
        timeList: [],
        amount: '',
        timeType: ''
      },
      showWeeks: [],
      rules: {
        name: [
          { required: true, message: '请输入价格模板名称', trigger: 'blur' },
          { min: 2, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        amount: [
          {
            required: true,
            message: '请输入模板价格',
            trigger: 'blur'
          }
        ],
        timeList: [
          {
            type: 'array',
            required: true,
            message: '请至少选择一个时间',
            trigger: 'change'
          }
        ]
      },
      weeksList: [
        {
          name: '周一',
          disabled: false
        },
        {
          name: '周二',
          disabled: false
        },
        {
          name: '周三',
          disabled: false
        },
        {
          name: '周四',
          disabled: false
        },
        {
          name: '周五',
          disabled: false
        },
        {
          name: '周六',
          disabled: false
        },
        {
          name: '周日',
          disabled: false
        },
        {
          name: '节假日',
          disabled: false
        }
      ]
    };
  },
  computed: {
    priceData() {
      return this.priceList;
    }
  },
  watch: {
    formPrice: {
      handler(form) {
        this.init();
      },
      deep: true
    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.form = JSON.parse(JSON.stringify(this.formPrice));
      if (this.form.timeType !== 'default') {
        this.showWeeksFun();
      }
    },
    timeChange(item, event) {
      if (item.name === '节假日') {
        if (event) {
          this.showWeeks.forEach(list => {
            if (list.name !== '节假日') {
              list.disabled = true;
              this.form.timeList = [];
              this.form.timeList.push('节假日');
            }
          });
        } else {
          this.showWeeks.forEach(list => {
            if (list.name !== '节假日') {
              list.disabled = false;
            }
          });
        }
      }
    },
    showWeeksFun() {
      let arr = [];
      this.showWeeks = [];
      this.priceData.forEach(list => {
        if (list.timeType === 'holiday') {
          arr.push('节假日');
        } else if (list.timeType === 'default') {
          list.timeList.forEach(item => {
            arr = [];
          });
        } else {
          list.timeList.forEach(item => {
            arr.push(item);
          });
        }
      });
      let arrWeek = [];
      arrWeek = this.weeksList.filter(week => {
        return !arr.includes(week.name);
      });
      if (this.form.timeType) {
        this.weeksList.forEach((item, index) => {
          this.form.timeList.forEach(list => {
            if (list === item.name) {
              arrWeek.splice(index, 0, item);
            }
          });
        });
      }
      this.showWeeks = Object.assign([], arrWeek);
      this.showWeeks.forEach(list => {
        if (this.form.timeType === 'holiday' && list.name !== '节假日') {
          list.disabled = true;
        } else {
          list.disabled = false;
        }
      });
    }
  }
};
</script>
